<!--
 * @Author: [wangll]
 * @Date: 2021-09-17 14:07:02
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-23 21:14:21
 * @Description: 封装头部组件
-->

<template>
  <div>
      <!-- {{category}} -->
    <!-- 头部开始 -->
    <div class="header">
      <div class="header_top">
        <div class="wrapper">
          <div class="left">山西大学新闻网欢迎您！</div>
          <div class="right">学校主页
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text">
          </div>
        </div>
      </div>
      <div class="header_main">
        <div class="wrapper">
          <div class="logo" @click="toHome">
            <img src="../assets/resource/img/indexlogo.jpg" alt="" />
          </div>
          <ul>
            <li :class="$route.query.name===item.name?'current':''" v-for='item in category' @click="toJump(item)" :key='item.id'>{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
  </div>
</template>

<script>
import {get} from '../utils/request'
export default {
    data(){
        return {
            category:[]
        }
    },
    created(){
        this.loadCategory();
    },
    methods:{
        //所有的路径都要写在方法中
        //跳转到主页
        toHome(){
            this.$router.push({
                path:'/home'
            })
        },
        //加载所有栏目
        loadCategory(){
            let url='/index/category/findAll';
            get(url).then(res=>{
                this.category=res.data;
            })
        },
        //跳转
        toJump(item){
            // alert(JSON.stringify(item));
            //跳转到list页面
            //编程式路由导航
            this.$router.push({
                //跳转的路径 和 携带的参数
                path:'/list',
                //query放携带的参数
                query:item
            })
        }
    }
};
</script>

<style lang="scss">
    //头部样式
    .header {
        .header_top {
            background-color: #057d7c;
            color: #fff;
            & > .wrapper::after {
              display: block;
              content: "";
              clear: both;
            }
            .left,
            .right {
              line-height: 3em;
            }
            .left {
              float: left;
            }
            .right {
              float: right;
              input{
                border-radius: 10px;
                background-color: #057d7c;
                border: 1px solid #fff;
                color: #fff;
              }
            }
        }
        .header_main {
          background-image: linear-gradient(#e3e3e3,#ffffff);
          .wrapper {
              display: flex;
              justify-content: space-between;
              position: relative;
              color: black;
              min-height: 50px;
              .logo {
                cursor: pointer;
              }
              ul {
                  // position: absolute;
                  // bottom: 0;
                  // right: 0;
                  margin-top: 1em;
                  li {
                      float: left;
                      padding: .8em;
                  }
                  li:hover {
                      background-color: #057d7c;
                      color: white;
                      cursor: pointer;
                  }
                  li.current{
                      background-color: #057d7c;
                      color: white;
                      cursor: pointer;
                  }
              }
          }
        }
    }
</style>